<template>
    <div class="homeTop">
        <div class="topTitle">
            <p>欢迎<span>{{adminName}}</span>进入!</p>
            <p>时间：{{time}}</p>
        </div>

        <Panel :panel_data = "top_info"></Panel>


    </div>
</template>

<script>
import Panel from './panel'
export default {
    name:'homeTop',
    data(){
        return{
            adminName:this.$store.state.adminName,
            time:''
        }
    },
    components:{
        Panel
    },
    props:{
        top_info:{
            type:[String,Object,Array]
        }
    },
    methods:{
        getDate(){
            setInterval( () =>{
                let time = new Date()
                this.time = time.toLocaleString()
            },1000)
            
        }
    },
    mounted(){
        this.getDate()
    },
    beforeDestroy(){
        //vue实例销毁前
        if (this.getDate) {
            clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
        }
    }
    
}
</script>

<style scoped>
.topTitle p{
    line-height: 30px;
}
.topTitle p:nth-child(1){
    font-size: 20px;
    font-weight: bold;
    color: #676a6d;
}
.topTitle p:nth-child(2){
    font-weight: bold;
    color: #8D99A8;
}
.topTitle p span{
    color: rgb(252, 6, 67);
}
</style>